import { memo, useEffect } from "react";
import LogicFlow from "@logicflow/core";
import '@logicflow/core/dist/index.css';
import { register } from '@logicflow/react-node-registry';

import Start from "./node-components/Start";

function Home(props) {

  useEffect(() => {
    const lf = new LogicFlow({
      container: document.querySelector('#container'),
      grid: true,
      height: 600,
    });

    lf.setTheme({
      background: {
        background: '#dfeefd' // 设置画布背景色
      }
    });

    register({
      type: 'start-node',
      component: Start,
    }, lf);

    const data = {
      // 节点数据
      nodes: [
        {
          id: 'start-1',
          type: 'start-node',
          x: 300,
          y: 80,
          properties: {
            width: 200,
            height: 100,

            eventType: '点击',
            eventObject: '商品A'
          },
        },
        {
          id: '21', // 节点ID，需要全局唯一，不传入内部会自动生成一个ID
          type: 'rect', // 节点类型，可以传入LogicFlow内置的7种节点类型，也可以注册自定义节点后传入自定义类型
          x: 200, // 节点形状中心在x轴位置
          y: 260, // 节点形状中心在y轴的位置
          text: 'Origin Usage-rect', // 节点文本
          properties: { // 自定义属性，用于存储需要这个节点携带的信息，可以传入宽高以重设节点的宽高
            width: 160,
            height: 80,
          }
        },
        {
          id: '50',
          type: 'circle',
          x: 400,
          y: 400,
          text: 'Origin Usage-circle',
          properties: {
            r: 60,
          }
        },
      ],
      // 边数据
      edges: [
        {
          id: 'rect-1-circle', // 边ID，性质与节点ID一样
          type: 'polyline', // 边类型
          sourceNodeId: 'start-1', // 起始节点Id
          targetNodeId: '21', // 目标节点Id
          endPoint: {
            x: 200,
            y: 220,
          }
        },
        {
          id: 'rect-2-circle', // 边ID，性质与节点ID一样
          type: 'polyline', // 边类型
          sourceNodeId: '50', // 起始节点Id
          targetNodeId: '21', // 目标节点Id
        },
      ],
    };

    lf.render(data);
  });

  return (
    <div className="home">
      {/* 创建画布容器 */}
      <div id="container" />
    </div>
  );
}

export default memo(Home);
